<template>
  <md-input-item
    v-model="innerValue"
    :type="type"
    :title="title"
    :name="name"
    :placeholder="placeholder"
    :error="error"
    @blur="onBlur"
  >
    <span slot="left" v-if="icon" class="iconfont" :class="icon"></span>
  </md-input-item>
</template>

<script>
import { InputItem } from "mand-mobile";
export default {
  components: {
    [InputItem.name]: InputItem
  },
  props: {
    imgUrl: {
      type: String,
      default: ""
    },
    rightType: {
      type: String,
      default: "0"
    },
    icon: {
      type: String,
      default: ""
    },
    value: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    },
    title: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    error: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      innerValue: "",
      isShowCount: false,
      count: 60,
      timer: null
    };
  },
  watch: {
    value: {
      handler(val) {
        this.innerValue = val;
      },
      immediate: true
    },
    innerValue(val) {
      this.$emit("input", val);
    }
  },
  methods: {
    onBlur() {
      let u = navigator.userAgent;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if (isIOS) {
        setTimeout(() => {
          const scrollHeight =
            document.documentElement.scrollTop || document.body.scrollTop || 0;
          window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 200);
      }
      this.$emit("blur");
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>
<style scoped lang="less">
.iconfont {
  font-size: 35px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: rgba(255, 255, 255, 1);
  color: white;
}
.link {
  font-size: 25px;
}
</style>
